<script setup>
import {ref} from "vue";
import {replaySonComment, deleteComment} from "@/apis/article";
import {useRouter} from "vue-router";
import {ElMessage, ElMessageBox} from "element-plus";
import {useUserStore} from "@/store/user";
const userStore = useUserStore()
const router = useRouter()
const articleId = router.currentRoute.value.query.articleid
const props = defineProps({
  data: Array
})
const isShow = ref(false)




const commentSonForm = ref({
  parentCommentId: '', articleId: '', comment: '', createDate: ''
})
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const date = () => {
  let date = new Date();
  let year = date.getFullYear()
  let mon = date.getMonth() + 1
  let day = date.getDate()
  let now = year + "-" + mon + "-" + day
  return now
}
const day = date()
commentSonForm.value.createDate = day
const postIdAndParentId = (id) => {
  commentSonForm.value.parentCommentId = id
}
commentSonForm.value.articleId = articleId
const replayComment = async () => {
  const {parentCommentId, articleId, content, createDate} = commentSonForm.value
  console.log(parentCommentId, articleId, content, createDate)
  const res = await replaySonComment({parentCommentId, articleId, content, createDate})
  if (res.code == 200) {
    ElMessage({type: 'success', message: res.message})
    location.reload()
  }else {
    ElMessage({type: 'error', message: res.message})
  }
}
const deleteCommentById = async (replyCommentId) => {
  ElMessageBox.confirm(
      '你确定删除该信息吗?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    await deleteComment(replyCommentId).then(res => {
      console.log(res)
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        location.reload()
      } else {
        ElMessage({
          type: 'error',
          message: '删除失败',
        })
      }
    })
  }).catch(() => {
    ElMessage({type: 'info', message: '操作取消'})
  })

}
</script>
<template>
  <el-card class="box-card" v-for="item in data" :key="item.id">
    <el-divider></el-divider>
    <el-button class="button" @click="isShow=!isShow" text v-if="!isShow">收起评论</el-button>
    <el-button class="button" @click="isShow=!isShow" text v-else>展开全部评论</el-button>
    <template #header>
      <div class="card-header">
        <span>{{ item.nickname }}于{{ item.createDate }}创建评论</span>
        <div style="display: flex;flex-direction: row;justify-content: space-around">
          <el-button class="button" text @click="postIdAndParentId(item.id,item.articleId);dialogFormVisible=true"
                     style="color: #409EFF">回复
          </el-button>
          <el-button class="button" @click="deleteCommentById(item.id)" type="danger" v-show="userStore.loginInfo.userId == item.accountId">删除</el-button>
        </div>
      </div>
    </template>
    <div class="">{{ item.content }}</div>
    <CommentList :data="item.comments" v-if="!isShow"></CommentList>
  </el-card>
  <el-dialog v-model="dialogFormVisible" title="回复评论">
    <el-form :model="commentSonForm">
      <el-form-item label="评论id" :label-width="formLabelWidth">
        <el-input v-model="commentSonForm.parentCommentId" autocomplete="off" disabled/>
      </el-form-item>
      <el-form-item>
        <el-form-item label="文章id" :label-width="formLabelWidth">
          <el-input v-model="commentSonForm.articleId" autocomplete="off" disabled/>
        </el-form-item>
      </el-form-item>
      <el-form-item label="内容" :label-width="formLabelWidth">
        <el-input type="textarea" rows="4" v-model="commentSonForm.content" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="创建日期:" :label-width="formLabelWidth">
        <el-input v-model="commentSonForm.createDate" autocomplete="off" disabled/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="replayComment();dialogFormVisible = false;">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
  text-align: left;
}

.box-card {
  width: 100%;
}
</style>